<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>带有略缩图的图片切换</title>
		<style>
		body{
			margin:0px;
			padding:0px;
			}
		#wrap{
			width:600px;
			height:600px;
			position:relative;
			margin:auto;
			background:lightblue;
			}
		h1{
			color: olivedrab;
			text-align:center;
			position: relative;
			top: 10px;
		}	
		#pic{
			width:430px;
			height:500px;
			position: relative;
			margin:auto;
		#pic img {
			display: block;
			width: 430px;
		}
			}
		#circle{
			text-align: center;
			}
		#circle li{
			width:40px;
			height:40px;
			border-radius:20px;
			display:inline-block;
			background:#928982;
			position:relative;
			}
		
		#circle span{
			position:relative;
			width:120px;
			height:85px;
			left:-50px;
			top:-90px;
			background:#000;
			display:none;
			}
		#circle .pic1{
			background:url(img/1.jpg) no-repeat;
			background-size: contain;
			}	
		#circle .pic2{
			background:url(img/2.jpg) no-repeat;
			background-size: contain;
			}	
		#circle .pic3{
			background:url(img/3.jpg) no-repeat;background-size: contain;
			}	
		#circle .pic4{
			background:url(img/4.jpg) no-repeat;
			background-size: contain;
			}	
		#circle .pic5{
			background:url(img/5.jpg) no-repeat;
			background-size: contain;
			}	

		#left,#right{
			position: relative;
			top:-230px;
			width:50px;
			height:50px;
			background:rgba(0,0,0,0.1);
			}
		#left:hover,#right:hover{
			background:rgba(0,0,0,0.5);
		}
		#left img ,#right img{
			display: block;
			width: 21px;
			height: 42px;
			margin-top: 4px;
			margin-left: 15px;
		}
		#left  {
			float: left;
		}
		#right {
			float: right;
		}
		#circle li{
			display: inline-block;
			margin-top: 20px;
			width: 40px;
			height: 40px;
			position: relative;
			top: -60px;
			border-radius:20px ;
			margin-right: 20px;
			background: lightgray;
			}
		#circle .ring {
			background: orange;
		}	
		li {
			list-style: none;
		}
		img{
			display:none;
			}
		
		</style>
		
			
	</head>
	
	<body>
		<div id="wrap">
			<h1>带缩略图的图片轮播</h1>
			<div id="pic">
				<img src="img/1.jpg"  style='display:block;'/>
				<img src="img/2.jpg" width="430px" height="430px"/>
				<img src="img/3.jpg" />
				<img src="img/4.jpg" />
				<img src="img/5.jpg" width="430px" height="430px" />
				<span id="left"><img src="img/icon-arrow-left.png"/></span>
				<span id="right"><img src="img/icon-arrow-right.png"/></span>
				
			</div>	
			<div id="circle">
				<li class="ring">
					<span class="pic1" style="display:block;"></span>
				</li>
				<li>
					<span class="pic2"></span>
				</li>
				<li>
					<span class="pic3"></span>
				</li>
				<li >
					<span class="pic4"></span>
				</li>
				<li>
					<span class="pic5"></span>
				</li>
			</div>	
		</div>
		<script>
			var oDiv = document.getElementById("circle");
			var aLi = oDiv.getElementsByTagName("li");
			var aSpan = oDiv.getElementsByTagName("span");
			var oPic = document.getElementById("pic");
			var aImg = oPic.getElementsByTagName("img");
			var oLeft = document.getElementById("left");
			var oRight = document.getElementById("right") ;
			var num = 0
			for(var i=0;i<aLi.length;i++){
				  aLi[i].index = i;
				  aLi[i].onmouseover = function(){
				 	 for(var i=0;i<aLi.length;i++){
				 	 	 aLi[i].className = "";
				 	 	 aSpan[i].style.display="none";
				 	 }
				 	 this.className = "ring";
				 	 aSpan[this.index].style.display="block";
				 }
				  
				 aLi[i].onclick = function(){
				 	 for(var i=0;i<aLi.length;i++){
				 	 	aImg[i].style.display="none";
				 	 }
				 	 aImg[this.index].style.display="block";
				 	 console.log(this.index);//1
				 	num=this.index;
				 	
				}
				 
			}
			
			oRight.onclick = function(){
				
				num++; 
				console.log(num)
				if(num>=aLi.length){
					num=0;
				}
				Tab();
			}
			oLeft.onclick = function(){
				num--; //1 2 3 4  5
				if(num<0){
					num=aLi.length-1;
				}
				Tab();
				
			}
			function Tab(){
				for(var i=0;i<aLi.length;i++){
				 	 	aImg[i].style.display="none";
				 	 	aLi[i].className = "";
				 	 	aSpan[i].style.display="none";
				}
				aImg[num].style.display="block";
				aSpan[num].style.display="block";
				aLi[num].className = "ring";
			}
		</script>
	</body>
</html>
